body {
    margin: 2%;
    background: #212121;
    color: white;
    font-family: IBM Plex Serif;
}
header {
    display: flex;
}
#logo {
    width: 5em;
    margin: 0 1%;
}
#logo img {
    width: 100%;
}
#title {
    font-size: 3em;
    font-weight: 900;
    color: #911f1b;
    font-family: Fira Mono;
}
nav {
    font-family: Fira Mono;
}
.geek-code {
    display: block;
    margin-top: 2em;
    max-width: 36ch;
}
.wrap {
    word-wrap: break-word;
}
.code {
    font-family: Fira Mono;
}
code {
    font-family: Fira Mono;
}
/* Smartphones ----------- */
@media only screen and (max-width : 750px) {
    main {
        margin: 3em 3em;
    }
    #aside-separator {
        margin-top: 3em;
    }
    input, textarea {
        width: 100%;
    }
}
/* Bigger ----------- */
@media only screen and (min-width : 751px) {
    main {
        margin: 3em 3em;
        display: flex;
    }
    aside {
        width: 18em;
        margin-left:auto;
        margin-right:0
    }
    #aside-separator {
        display: none;
    }
    textarea {
        width: 72ch;
    }
    input {
        width: 50ch;
    }
}
.screenshots {
    display: flex;
    flex-wrap: wrap;
}
.screenshots div {
    width: 10em;
    flex: 1;
}
.screenshots div img {
    width: 10em;
}
.screenshots div span {
    display: block;
    margin-bottom: 10%;
}
aside ul {
    list-style-type: none;
    font-family: Fira Mono;
}
li {
    margin-top: .5em;
}
.small-icon {
    font-size: 16px;
}
.list-icon {
    width: 16px;
    margin-right: .5em;
}
a {
    color: #2f75d3;
    text-decoration: none;
}
a:hover {
    text-decoration: underline wavy #2f75d3;
}
.sig {
    color: #864b8e;
}
article {
    margin-right: 20%;
}
ul.listing {
    list-style-type: disclosure-closed;
    margin-top: 3em;
}
h1 {
    font-size: xx-large;
}
.listing-title {
    font-size: x-large;
    font-weight: bold;
    font-family: Fira Sans;
}
.listing-description {
    margin-left: 1em;
}
h1, h2, h3, h4, h5, h6 {
    font-family: Fira Sans;
}
.address {
    font-family: Fira Mono;
}
.qr {
    width: 50%;
}
.refs {
    border-top: 1px solid;
    margin-top: 3em;
}
.flex {
    display: flex;
}
.flex > img {
    margin-right: 1%;
}
.delete {
    text-decoration: line-through;
}
ul.no-dot > li {
    list-style-type: none;
}
input, textarea {
    display: block;
    margin-bottom: 2em;
}
.contact-form, .sent, .anti-bots, .validate, #fail {
    display: none;
}
.label {
    color: #8b8b8b;
    font-family: Fira Sans;
}
.note {
    color: #5e5e5e;
}
input {
    border: none;
    border-bottom: #fbb049 solid 1px;
    background: none;
    font-family: Fira Mono;
}
textarea {
    border: #fbb049 solid 1px;
    background: none;
    font-family: Fira Mono;
}
button {
    display: block;
    margin-left: auto;
    margin-right: 0;
    background: #fbb049;
    border: none;
    width: 72px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    color: black;
}
.error {
    color: #911f1b;
}
